<template>
  <div class="map-view">
    <div id="mymap"></div>
    <div class="maplist">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="风景" name="first">
          <ol>
            <li v-for="(item,index) in pois" :key="index" @mouseover="showPoi(item.id)">
              <span class="name">{{item.name}}</span>
              <span class="distance">{{((item.distance/10)/100).toFixed(2)}}公里</span>
            </li>
          </ol>
        </el-tab-pane>
        <el-tab-pane label="交通" name="second">
          <ol>
            <li v-for="(item,index) in pois" :key="index" @mouseover="showPoi(item.id)">
              <span class="name">{{item.name}}</span>
              <span class="distance">{{((item.distance/10)/100).toFixed(2)}}公里</span>
            </li>
          </ol>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      // userLocation: "",
      pois: [],
      map: {},
      markers: [],
      rectangle: [],
    };
  },
  methods: {
    async handleClick(tab, event) {
      console.log(tab);
      await this.loadPoiList(tab.label);
      // console.log(this);
      // 要等待地点列表获取完毕
      this.setMarkers();
    },
    createMap() {
      this.map = new AMap.Map("mymap", {
        zoom: 20,
        // center: [113.3245904, 23.1066805]
      });

      console.log(this.pois);
      console.log(this.map.getCenter());
      // 创建完地图, 就可以遍历 pois 列表, 每个地点都创建一个 marker 放到地图上
      this.setMarkers();
    },
    loadUserLocation() {
      // this.$axios({
      //   url: "https://restapi.amap.com/v3/ip",
      //   params: {
      //     key: "00d40fac8d15e48d88645c2bb5832886",
      //   },
      // }).then((res) => {
      //   console.log(res.data);
      //   this.userLocation = res.data.city;
      //   this.rectangle=res.data
      // });
      return this.$axios({
        url: "/hotels",
        params: {
          id: this.$route.params.id,
        },
        /* params: {
          key: "d4fe949f46c376f24a97aba4add1ccd7",
        }, */
      }).then((res) => {
        console.log(res);
        this.rectangle = res.data.data;
        console.log(this.rectangle[0].location);
      });
    },
    loadPoiList(types) {
      return this.$axios({
        url: "https://restapi.amap.com/v3/place/around",
        params: {
          key: "00d40fac8d15e48d88645c2bb5832886",
          location: `${this.rectangle[0].location.longitude},${this.rectangle[0].location.latitude}`,
          // "113.324590,23.106681",
          types: types || "风景",
        },
      }).then((res) => {
        console.log(res.data);
        this.pois = res.data.pois;
      });
    },
    setMarkers() {
      // 遍历 pois 列表, 每个 poi 生成一个 marker
      // 最终组成 markers 数组
      this.markers = this.pois.map((poi, index) => {
        var marker = new AMap.Marker({
          title: poi.name,
          position: poi.location.split(","),
          content: `
          <div class="content-marker"> 
            <img src="http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"> 
            <div class="marker-index">${index + 1}</div>
          </div>
          `,
          // 创建点标记的时候, 可以讲每个 poi 的id 作为额外数据添加从点标记
          // 用作后面的标识
          extData: poi.id,
        });

        // 设置每个点标记鼠标 Hover 事件
        // 传入当前的 poiId, 进行居中
        marker.on("mouseover", () => {
          return this.showPoi(poi.id);
        });

        return marker;
      });

      // 使用通用函数,将整个地图的覆盖物清理掉
      this.map.clearMap();

      this.map.add(this.markers);

      // 添加完点标记, 将地图的视图设为合适的大小
      this.map.setFitView();
    },
    showPoi(poiId) {
      // 外面传入 poiId
      // 遍历 markers 数组,
      // 找出对应的标记居中显示

      // 如果不是 vue, 可以用高德的方法获取 markers 数组
      // const markers = this.map.getAllOverlays('marker');
      console.log(this.markers[0].getExtData());
      this.markers.forEach((marker) => {
        // 判断标记的额外信息是否等于传进来的poiId
        if (marker.getExtData() == poiId) {
          // 找到了需要居中的标记

          // 将匹配点置顶(重叠的情况)
          marker.setTop(true);
          //显示一个提示窗
          const infoWindow = new AMap.InfoWindow({
            content: `<span style="font-size: 12px;color: #333">${marker.getTitle()}</span>`,
            offset: new AMap.Pixel(0, -32),
          });
          infoWindow.open(this.map, marker.getPosition());

          // 设置地图以这个点居中
          this.map.setCenter(marker.getPosition());
        }
      });
    },
    // async changeMarkers(types) {
    //   console.log(types);

    //   await this.loadPoiList(types);
    //   // 要等待地点列表获取完毕
    //   this.setMarkers();
    // },
  },
  async mounted() {
    await this.loadUserLocation();
    // 先获取点数据
    // await 等待的一定是 promise
    // 所以这个 loadPoiList 方法必须 return axios 才可以
    await this.loadPoiList();
    // 创建地图, 在创建地图函数里面, 放置点标记
    this.createMap();
  },
};
</script>

<style lang="less" scoped>
.map-view {
  margin-top: 40px;
  width: 1000px;
  height: 360px;
  display: flex;
  #mymap {
    height: 360px;
    width: 650px;
    flex: 1;
  }
  /deep/.maplist {
    box-sizing: border-box;
    width: 330px;
    height: 354px;
    padding-left: 20px;
  }
  ol {
    overflow: auto;
    width: 313px;
    height: 314px;
  }
  li {
    display: flex;
    margin: 0 20px 20px 10px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    .name {
      flex: 1;
    }
  }
}
/deep/ .content-marker {
  position: relative;
  white-space: normal;
  width: 32px;
  height: 40px;
  top: -47px;
  right: 5px;
  img {
    white-space: normal;
    width: 100%;
    height: 100%;
  }
  .marker-index {
    position: absolute;
    top: 1px;
    right: 6px;
    width: 20px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    text-align: center;
    color: #fff;
  }
}
</style>